<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
    <link href="css/AdminDoCourse.css"
          rel="stylesheet" type="text/css">
    <style type="text/css">
        li {
            border: 1px lightgray solid;
            margin: 10px;
            padding: 2px 10px 2px 10px;
        }
        .red{
            color: red;
        }
        .black{
            color: black;
        }
        .hide{
            display: none;
        }
        #editForm .col-2 {
            -ms-flex: 0 0 16.666667%;
            flex: 0 0 23.666667%;
            max-width: 23.666667%;
        }
    </style>
    <script src="jquery/jquery-3.6.0.min.js"></script>
    <script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- editModal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">插入</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editForm" style="padding-top: 500px">
                    <!-- 在编辑和删除时 通过隐藏域完成主键值的存放 -->
                    <input type="hidden" name="cId" id="editcourseId">
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">课程名:</label>
                        <div class="col-8">
                            <input type="text" name="cName" id="courseName" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">课程号:</label>
                        <div class="col-8">
                            <input type="text" name="cKey" id="courseKey" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">教学教师:</label>
                        <div class="col-8">
                            <input type="text" name="cTeacher" id="courseTeacher" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">最小人数:</label>
                        <div class="col-8">
                            <input type="text" name="cMinNum" id="courseMinNum" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">最大人数:</label>
                        <div class="col-8">
                            <input type="text" name="cMaxNum" id="courseMaxNum" class="form-control">
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="editSub">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- delModal -->
<div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                您确定要删除【<span id="delCname"></span>】吗?
                <form id="delForm">
                    <input type="hidden" name="cKey" id="Wekey">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>
            </div>
        </div>
    </div>
</div>


<div id="main">
    <div>
        欢迎【<span id="loginName"></span>】登录
    </div>
    <div id="top">
        <form id="searchForm">
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">课程名:</label>
                <div class="col-8">
                    <input type="text" name="cName" class="form-control"
                           placeholder="支持模糊查询">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">类型:</label>
                <div class="col-8">
                    <select class="form-control" name="cKey">
                        <option value="">--所有--</option>
                        <option value="XC">XC</option>
                        <option value="XK">XK</option>
                        <option value="XF">XF</option>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-form-label col-2 text-center"></label>
                <div class="col-8" style="display: flex;justify-content: space-around;">
                    <button type="button" id="btnSearch" class="btn btn-lg btn-success">不符合條件課程</button>
                    <button type="button" id="btnInsert" class="btn btn-lg btn-success">添加</button>
                </div>
            </div>
        </form>
    </div>
    <div id="center">
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <td>课程名字</td>
                <td>课程号</td>
                <td>教学教师</td>
                <td>最小人数</td>
                <td>当前人数</td>
                <td>最大人数</td>
                <td>删除操作</td>
                <td>修改操作</td>
            </tr>
            </thead>
            <tbody id="data">

            </tbody>
        </table>

    </div>
</div>

</body>
<script>
    jQuery(function () {

        jQuery("#btnSearch").click(function () {
            search();
        })
    });

    function search() {
        //获取表达数据
        let form=jQuery("#searchForm").serialize();
        console.log(form);

        jQuery.post("admin/search",form,function (rst) {
            //在查询是返回的list集合会自动转为数组
            let trs='';
            //js 认为非空即真
            if(rst.length==0)
            {
                //此处使用反引号
                trs+=`
                        <tr>
                            <td colspan="8" class="text-center">没有数据</td>
                        </tr>
                    `;
            }else{
                for(let i=0;i<rst.length;i++)
                {
                    let course=rst[i];
                    trs+=`
                           <tr>
                                <td>${course.cName}</td>
                                <td>${course.cKey}</td>
                                <td>${course.cTeacher}</td>
                                <td>${course.cMinNum}</td>
                                <td>${course.cCurNum}</td>
                                <td>${course.cMaxNum}</td>
                                <td class="red"><a href="#"
                                        onclick='showDelDialog(${JSON.stringify(course)})'>删除</a></td>
                                <td>
                                    <a href="#" onclick='showEditDialog(${JSON.stringify(course)})'>编辑</a>
                                </td>
                            </tr>
                        `;
                }
            }
            jQuery("#data").html(trs);
        })
    }
</script>
<script>
    // jQuery("#editModal").modal("show");
    function showDelDialog(course)
    {
        jQuery("#delModal").modal("show");
        jQuery("#delCname").html(course.cName);
        jQuery("#Wekey").val(course.cKey);
    }
    function doDelete()
    {
        jQuery("#delModal").modal("hide");
        let form=jQuery("#delForm").serialize();
        jQuery.post("admin/delC",form,function(rst){
            if(rst>0)
            {
                alert("删除成功!");
                //再查询一下
                search();
            }else{
                alert("删除失败!");
            }
        })
    }
</script>
<script>
    function showEditDialog(course) {
        jQuery("#editModalLabel").html("修改");
        jQuery("#editModal").modal("show");
        jQuery("#courseName").val(course.cName);
        jQuery("#courseKey").val(course.cKey);
        jQuery("#courseTeacher").val(course.cTeacher);
        jQuery("#courseMinNum").val(course.cMinNum);
        jQuery("#courseMaxNum").val(course.cMaxNum);
        $("#editSub").off('click');
        $("#editSub").click(function (){
            doOperator('upt');
        })
    }
    $('#btnInsert').click(function (){
        jQuery("#editModalLabel").html("插入");
        jQuery("#editModal").modal("show");
        $('#editForm').children('div').find('input').val('');
        $("#editSub").off('click');
        $("#editSub").click(function (){
            doOperator('add');
        })
    });
    function doOperator(op)
    {
        switch (op)
        {
            case 'add':doUpdate('admin/addC');break;
            case 'upt':doUpdate('admin/update');break;
        }
    }
    function doUpdate(str) {
        let form=jQuery("#editForm").serialize();
        console.log(form);
        jQuery.post(str,form,function (rst) {
            if(rst>0)
            {
                jQuery("#editModal").modal("hide");
                alert("操作成功！");
                search();
            }else{
                alert("操作失败!");
            }
        })
    }
</script>

<script>
    let info=sessionStorage.getItem("adminLogin");
    console.log(info);
    // 如果获取不到course对应的数据
    //说明没有经过登录
    if(!info)
    {
        location.href="AdminLogin.html";
    }else{
        let admin=JSON.parse(info);
        jQuery("#loginName").html(admin.adminName);
    }
</script>
<script type="text/javascript" src="js/DoCourse.js"></script>
</html>










